import 'package:flutter/material.dart';
import 'package:pcms/models/production_data_models.dart';
import 'package:pcms/services/mock_data_service.dart';

class ProductionDataWidget extends StatelessWidget {
  const ProductionDataWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final productionData = MockDataService.getProductionData();

    return SingleChildScrollView(
      child: Column(
        children: [
          _buildProductionSection('方舱空调', Icons.home_work, productionData['cubicleAirConditionerData']!),
          const SizedBox(height: 12),
          _buildProductionSection('智能送风口', Icons.air, productionData['smartAirOutletData']!),
          const SizedBox(height: 12),
          _buildProductionSection('高效使用累计时间', Icons.timer, productionData['airOutletUsageTime']!),
          const SizedBox(height: 12),
          _buildProductionSection('空调机组', Icons.hvac, productionData['airConditionerUnitData']!),
          const SizedBox(height: 12),
          _buildProductionSection('空气源模块', Icons.water_drop, productionData['airSourceModuleData']!),
          const SizedBox(height: 12),
          _buildProductionSection('尘埃粒子监控', Icons.analytics, productionData['dustParticleMonitorData']!),
        ],
      ),
    );
  }

  Widget _buildProductionSection(String title, IconData icon, List<dynamic> data) {
    if (data.isEmpty) {
      return const SizedBox.shrink();
    }

    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFF0B1A3E).withOpacity(0.8),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: const Color(0xFF0A79DF).withOpacity(0.3),
          width: 1,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 栏目标题
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            decoration: const BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  color: Color(0xFF0A79DF),
                  width: 2,
                ),
              ),
            ),
            child: Row(
              children: [
                Icon(
                  icon,
                  color: const Color(0xFF0A79DF),
                  size: 16,
                ),
                const SizedBox(width: 8),
                Container(
                  width: 1,
                  height: 16,
                  color: const Color(0xFF0A79DF),
                ),
                const SizedBox(width: 8),
                Text(
                  title,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 14,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),
          // 生产数据显示
          Padding(
            padding: const EdgeInsets.all(8),
            child: LayoutBuilder(
              builder: (context, constraints) {
                final itemWidth = (constraints.maxWidth - 24) / 4; // 4 items per row
                return Wrap(
                  spacing: 4.0,
                  runSpacing: 4.0,
                  children: data.map((item) {
                    return SizedBox(
                      width: itemWidth,
                      child: Container(
                        decoration: BoxDecoration(
                          color: const Color(0xFF0B1A3E),
                          borderRadius: BorderRadius.circular(4),
                          border: Border.all(
                            color: const Color(0xFF0A79DF).withOpacity(0.3),
                            width: 1,
                          ),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              _getItemIcon(title, item.name),
                              const SizedBox(width: 6),
                              Flexible(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Text(
                                      item.name,
                                      style: const TextStyle(
                                        color: Colors.white,
                                        fontSize: 10,
                                        fontWeight: FontWeight.w500,
                                      ),
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                    Text(
                                      '${item.value} ${item.unit}',
                                      style: TextStyle(
                                        color: Colors.white.withOpacity(0.7),
                                        fontSize: 8,
                                      ),
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    );
                  }).toList(),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _getItemIcon(String sectionTitle, String itemName) {
    // 为方舱空调栏目中的特定数据项添加相应图标
    if (sectionTitle == '方舱空调') {
      switch (itemName) {
        case '房间温度':
          return Icon(
            Icons.thermostat,
            color: const Color(0xFFFF6B6B),
            size: 12,
          );
        case '房间湿度':
          return Icon(
            Icons.water_drop,
            color: const Color(0xFF4ECDC4),
            size: 12,
          );
        case '房间压差':
          return Icon(
            Icons.compress,
            color: const Color(0xFFFFE66D),
            size: 12,
          );
      }
    }
    
    // 其他栏目使用默认的蓝色圆点
    return Container(
      width: 8,
      height: 8,
      decoration: BoxDecoration(
        color: const Color(0xFF0A79DF),
        borderRadius: BorderRadius.circular(4),
        boxShadow: [
          BoxShadow(
            color: const Color(0xFF0A79DF).withOpacity(0.3),
            blurRadius: 6,
            spreadRadius: 2,
          ),
        ],
      ),
    );
  }
}